import {Form, Row, Col} from 'antd'
import React, {useEffect, useState} from 'react'
import type {UploadFile} from 'antd/es/upload/interface'
import cardStyles from '../index.less'
import {getPublicDownloadUrl} from '@/service/common/upload'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 20, offset: 0},
	},
}
function ReturnInfo(props: any) {
	const {info} = props
	const [fileList, setFileList] = useState<UploadFile[]>([])
	useEffect(() => {
		if (info?.validateReturnCar?.attachmentList) {
			getPublicDownloadUrl(info?.validateReturnCar?.attachmentList).then(
				(res: any) => {
					setFileList(res?.data)
				},
			)
		}
	}, [info])
	return (
		<div className={cardStyles.card} id="returnCar">
			<p className={cardStyles.title}>退车验车</p>
			<Form {...formLayout} wrapperCol={{flex: 1}}>
				<Row gutter={24} className={cardStyles.rows}>
					<Col span={24}>
						<Form.Item label="验车人员">
							{info?.validateReturnCar?.validatePerson}
						</Form.Item>
					</Col>
					<Col span={24}>
						<Form.Item label="验车时间">
							{info?.validateReturnCar?.validateTime}
						</Form.Item>
					</Col>
					<Col span={24}>
						<Form.Item label="备注">
							{info?.validateReturnCar?.remark}
						</Form.Item>
					</Col>
					<Col span={24}>
						<Form.Item label="验车清单上传">
							{fileList?.map((res: any) => (
								<a
									href={res.url}
									download={res?.filename}
									target="blank">
									{res.filename}
								</a>
							))}
						</Form.Item>
					</Col>
				</Row>
			</Form>
		</div>
	)
}
export default ReturnInfo
